<!--
  导航栏
  props：
    position string 参数描述：https://v5.framework7.io/vue/toolbar-tabbar
    links array 导航选项 参数设置参考：[{ title: "首页", f7: "house", href: "#" }],图标对应f7-icons图标名称https://framework7.io/icons/
    defaultActive number 选中项 default：0
  slots:
    default 用于自定义导航选项内容
-->
<template>
  <f7-toolbar :position="position" tabbar labels>
    <slot>
      <f7-link
        v-for="(item, i) in links"
        :key="i"
        :text="item.title"
        :icon-f7="item.f7"
        :tab-link-active="active === i"
        :href="item.href"
        @click="active = i"
      >
      </f7-link>
    </slot>
  </f7-toolbar>
</template>

<script>
export default {
  name: "qm-toolbar",
  props: {
    position: {
      type: String,
      default: "bottom"
    },
    links: {
      type: Array,
      default: () => [
        { title: "首页", f7: "house", href: "#" },
        { title: "资讯", f7: "doc", href: "#" },
        { title: "工作", f7: "bag", href: "#" },
        { title: "我的", f7: "person", href: "#"},
      ]
    },
    active: {
      type: Number,
      default: 0
    }
  }
}
</script>

<style lang="less" scoped>
.toolbar-bottom {
  background-color: #fff;
  &::before,&::after {
    content: none;
  }
}
</style>
